<template>
  <div>
    <!-- 创建查询条件 -->
    <TopFilter ref="formPanel" :list="topFilterList" :cols="4" :labelWidth="'90'" :collapse="true" @filterChange="changeHandle"></TopFilter>
    <!-- 创建一个查询table -->
    <FilterTable
      ref="table"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :columns="columns"
      :onColumnsChange="columns => (this.columns = columns)"
      columnsRef="visitConditionScanMainPage"
    >
    </FilterTable>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getVisitConditionScan } from '@/api/customerRepair/visitAnalysis/visitConditionScan';
import { getAllUser } from '@/api/customerRepair/usedCarVisit/resultEntry';
import { arrayObjDeWeight } from '@/utils/index';

export default {
  mixins: [dictionary],
  // 组件注册
  // components: {
  //   RtmAlarmDetail,
  //   EditAlarmDetail
  // },
  // 绑定数据定义
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: getVisitConditionScan,
      fetchParams: {},
      columns: this.createColumns(),
      type: null
    };
  },
  created() {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getAllUser();
  },
  // 处理方法
  methods: {
    // 关闭页面触发事件
    // 创建查询条件
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '日期范围',
          fieldName: 'inputDateS|inputDateE',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'SELECT',
          label: '回访类别',
          fieldName: 'visitType',
          itemList: [
            { value: '15721001', text: '售后回访' },
            { value: '15721002', text: '销售回访' },
            { value: '15721003', text: '二手车回访'},
            { value: '15721004', text: '活动回访' },
            { value: '15721005', text: '潜客回访' },
            { value: '15721006', text: '战败回访' },
          ],
          initialValue: '15721001'
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '回访时间',
          dataIndex: 'INPUT_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '回访人',
          dataIndex: 'TRANCER',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '非常满意',
          dataIndex: 'VERY_SATISFACTION',
          sorter: true
          // filter: true,
          // filterType: 'input'
        },
        {
          title: '满意',
          dataIndex: 'SATISFACTION',
          sorter: true
          // filter: true,
          // filterType: 'input'
        },
        {
          title: '一般',
          dataIndex: 'ORDINARY',
          sorter: true
          // filter: true,
          // filterType: 'input'
        },
        {
          title: '不满意',
          dataIndex: 'UNSATISFIED',
          sorter: true
          // filter: true,
          // filterType: 'input'
        },
        {
          title: '非常不满意',
          dataIndex: 'VERY_UNSATISFIED',
          sorter: true
          // filter: true,
          // filterType: 'input'
        }
      ];
    },
    // 查询条件触发方法
    changeHandle(val) {
      // this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    },
    // 所有用户
    async getAllUser() {
      const res = await getAllUser();
      let data = arrayObjDeWeight(res.data, 'userId'); // 人员去重(解决前端报错)
      this.columns.find(x => x.dataIndex === 'TRANCER').filterItems = this.columns.find(item => item.dataIndex === 'TRANCER').editItems = data.map(x => ({
        value: x.userId + '',
        text: x.employeeName
      }));
    }
  }
};
</script>
